<template>
  <el-form ref="form" :model="form" label-width="80px" :rules="rules">
    <el-form-item label="用户名:" prop="studentUsername">
      <el-input
        v-model="form.studentUsername"
        placeholder="请输入用户名"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码:" prop="studentPassword">
      <el-input
        v-model="form.studentPassword"
        placeholder="请输入密码"
      ></el-input>
    </el-form-item>
    <el-form-item label="真实姓名:" prop="studentName">
      <el-input
        v-model="form.studentName"
        placeholder="请输入真实姓名"
      ></el-input>
    </el-form-item>
    <el-form-item label="年龄:">
      <el-input v-model="form.studentAge" placeholder="请输入年龄"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="form.studentSex" placeholder="性别">
        <el-option label="男" value="1"></el-option>
        <el-option label="女" value="0"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="出生日期">
      <el-date-picker
        v-model="form.studentBirthday"
        type="date"
        placeholder="选日期"
      >
      </el-date-picker>
    </el-form-item>
    <el-form-item label="手机:">
      <el-input v-model="form.studentTel" placeholder="请输入手机号"></el-input>
    </el-form-item>
    <el-form-item label="年级" prop="studentClass">
      <el-select v-model="form.studentClass" placeholder="年级">
        <el-option label="一年级" value="1"></el-option>
        <el-option label="二年级" value="2"></el-option>
        <el-option label="三年级" value="3"></el-option>
        <el-option label="四年级" value="4"></el-option>
        <el-option label="五年级" value="5"></el-option>
        <el-option label="六年级" value="6"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="状态" prop="status">
      <el-select v-model="form.status" placeholder="状态">
        <el-option label="启用" value="1"></el-option>
        <el-option label="禁用" value="2"></el-option>
      </el-select>
    </el-form-item>
    <div class="clibtn">
      <el-button type="primary" size="small" @click="submit()">提交</el-button>
      <el-button size="small" @click="handleClose()">重置</el-button>
    </div>
  </el-form>
</template>

<script>
import {
  addStudentList,
  editStudentList,
  idStudentList,
} from "@/apis/zhuomeng/Index.js";
export default {
  data() {
    return {
      form: {
        studentUsername: "",
        studentName: "",
        studentClass: "",
        studentSex: "",
        studentTel: "",
        studentCreateTime: "",
        studentPassword: "",
        studentAge: "",
        studentBirthday: "",
      },
      rules: {
        studentUsername: [{ required: true, message: "请输入用户名" }],
        studentPassword: [{ required: true, message: "请输入密码" }],
        studentName: [{ required: true, message: "请输入真实姓名" }],
        studentClass: [{ required: true, message: "请选择年级" }],
        status: [{ required: true, message: "请选择状态" }],
      },
    };
  },
  mounted() {
    this.studentId = this.$route.query.rowId;
    // console.log(this.studentId);
    if (this.studentId) {
      // 6.通过studentId发请求查数据,赋值给form
      idStudentList(this.studentId).then((ok) => {
        // console.log(ok);
        this.form = ok.data.data;
      });
    }
  },
  methods: {
    // 提交用户信息
    submit() {
      if (!this.studentId) {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // 3.添加列表数据
            addStudentList(
              this.form.studentUsername,
              this.form.studentName,
              this.form.studentClass,
              this.form.studentSex,
              this.form.studentTel,
              this.form.studentCreateTime,
              this.form.studentPassword,
              this.form.studentAge,
              this.form.studentBirthday
            ).then((ok) => {
              console.log(ok);
              this.$router.push("/xuesheng");
            });
          }
        });
      } else {
        // console.log(this.studentId);
        // 编辑数据
        editStudentList(
          this.form.studentUsername,
          this.form.studentName,
          this.form.studentClass,
          this.form.studentSex,
          Number(this.form.studentTel),
          this.form.studentPassword,
          Number(this.form.studentAge),
          this.form.studentBirthday,
          this.studentId
        ).then((ok) => {
          console.log(ok);
          this.$router.push("/xuesheng");
        });
      }
    },
    // 重置信息
    handleClose() {
      this.$refs.form.resetFields();
    },
  },
};
</script>

<style scoped>
input {
  width: 100%;
  height: 30px;
  border: 1px solid#ccc;
}
.clibtn {
  margin-left: 80px;
}
</style>
